<template>
  <div class="media_find">
    <div class="nav_body">
      <div v-if="$store.state.device !== 'APP'" class="top_nav">
        <img v-if="$store.state.device !== 'APP'" class="logo_left" src="../../../assets/img/modules/media/icon_13.png" alt="">
        <div v-if="!($store.state.device === 'APP')"  class="btn_right">
          <a v-if="$store.state.media.is_qxym === '1'" href="https://www.workeredu.com/statics/app/index.html"><img src="../../../assets/img/modules/media/icon_22.png" alt=""></a>
          <a v-else :href="'/elective-choose?school_id=407&center_id=8038&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_28.png" alt=""></a>
          <a v-if="$store.state.media.is_qxym === '1'" href="https://www.workeredu.com/statics/app/usermy.html"><img src="../../../assets/img/modules/media/icon_24.png" alt=""></a>
          <a v-else :href="'/user-member?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_24.png" alt=""></a>
          <a v-if="$store.state.media.is_qxym !== '1'" href="/media-news">
            <img src="../../../assets/img/modules/media/icon_25.png" alt="">
          </a>
        </div>
      </div>
      <div class="nav_list">
        <a href="javascript:;" :class="itemActive === 0 ? 'nav_item active' : 'nav_item'" @click="openChil('/media-index', 0)">首页</a>
        <a href="javascript:;" :class="itemActive === 1 ? 'nav_item active' : 'nav_item'" @click="openChil('/media-celebrity', 1)">大咖</a>
        <a href="javascript:;" :class="itemActive === 2 ? 'nav_item active' : 'nav_item'" @click="openChil('/media-address', 2)">{{LocationCity}}</a>
<!--        <a href="javascript:;" :class="itemActive === 3 ? 'nav_item active' : 'nav_item'" @click="openChil('/media-industry', 3)">行业</a>-->
        <a href="javascript:;"  :class="itemActive === 4 ? 'nav_item active' : 'nav_item'" @click="openChil('/media-attention', 4)">关注</a>
      </div>
      <div class="nav_search_body" @click="openSarch">
        <img src="../../../assets/img/modules/media/icon_23.png" alt="">搜索你感兴趣的内容
      </div>
    </div>
    <div :class="!($store.state.device === 'APP') ?'content_view_body' : 'content_view_body content_active'">
      <transition :name="'van-slide-' + (qh_direction === 'right' ? 'right' : 'left')">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie'
export default {
  name: 'media_find',
  data () {
    return {
      itemActive: 0,
      LocationCity: '广州',
      qh_direction: 'right'
    }
  },
  props: {},
  watch: {
    $route (e) {
      switch (e.path) {
        case '/media-index' : // 首页
          this.itemActive = 0
          break
        case '/media-celebrity' : // 大咖
          this.itemActive = 1
          break
        case '/media-address' : // 广州
          this.itemActive = 2
          break
        case '/media-industry' : // 行业
          this.itemActive = 3
          break
        case '/media-attention' : // 关注
          this.itemActive = 4
          break
      }
    }
  },
  methods: {
    /* wf_Huang 2019/9/17 0017  跳转搜索页 */
    openSarch () {
      if (this.itemActive === 1) {
        this.$router.push({ path: '/media-celebrity-sarch' })
      } else {
        this.$router.push({ path: '/media-sarch' })
      }
    },
    openChil (url, index) {
      this.$router.push({ path: url })
      if (this.itemActive < index) {
        this.qh_direction = 'right'
      } else {
        this.qh_direction = 'left'
      }
      this.itemActive = index
    },
    /* wf_Huang 2019/9/16 0016 获取当前位置 */
    getAddressName () {
      if (!Cookies.get('LocationCity')) {
        // eslint-disable-next-line no-undef
        const geolocation = new BMap.Geolocation()
        var _this = this
        geolocation.getCurrentPosition(function getinfo (position) {
          let city = position.address.city // 获取城市信息
          _this.LocationCity = city.split('市')[0]
          Cookies.set('LocationCity', _this.LocationCity, { expires: 3 })
        }, function (e) {
          _this.LocationCity = '广州'
          Cookies.set('LocationCity', _this.LocationCity, { expires: 3 })
        }, { provider: 'baidu' })
      }
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    /* wf_Huang 2019/9/10 0010 初始化标签页 */
    switch (this.$route.path) {
      case '/media-index' : // 首页
        this.itemActive = 0
        break
      case '/media-celebrity' : // 大咖
        this.itemActive = 1
        break
      case '/media-address' : // 广州
        this.itemActive = 2
        break
      case '/media-industry' : // 行业
        this.itemActive = 3
        break
      case '/media-attention' : // 关注
        this.itemActive = 4
        break
    }
    this.getAddressName()
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .media_find {
    .top_nav{
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:  0 32px;
      .logo_left{
        width: 185px;
        height: 58px;
      }
      .btn_right{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        a{
          height: 100%;
          display: flex;
          padding: 0 10px;
          position: relative;
          img{
            width: 36px;
            height: 34px;
          }
          .active{
            width: 18px;
            height: 18px;
            position: absolute;
            right: 5px;
            top: 1px;
          }
        }
      }
    }
    .nav_list{
      display: flex;
      margin: 0 auto;
      padding: 31px;
      .nav_item{
        font-size: 28px;
        color: #999999;
        position: relative;
        padding: 0 20px;
      }
      .active{
        color: #027FFE;
        &:after{
          content: '';
          width: 24px;
          border-radius: 5px;
          height: 8px;
          background-color: #027FFE;
          position: absolute;
          bottom: -20px;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .nav_search_body{
      margin: 10px 32px;
      width: 686px;
      height: 64px;
      background: #F3F3F3;
      border-radius: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #666666;
      img{
        width: 28px;
        height: 24px;
        margin-right: 10px;
      }
    }
    .nav_body{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
      background-color: #ffffff;
    }
    .content_view_body{
      padding: 280px 0 30px 0;
    }
    .content_active{
      padding: 200px 0 30px 0;
    }
  }
</style>
